@font-face {
    font-family: 'brandon-grotesque-medium';
    src: url('../fonts/BrandonGrotesque-Medium.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.redirect-page {
    --font-body: ubuntu, Arial, sans-serif;
    --font-heading: brandon-grotesque-medium, Verdana, sans-serif;
    --color-primary:#534de4;
    --color-primary-darker:#3631be;
    --color-text: #4a4a4a;
    --color-button-bg: var(--color-primary);
    --color-hover: #363636;
    --color-link: #485fc7;
    --color-white: #ffffff;
    --color-dark: #0C0A30;
}
*,:after,:before{
    box-sizing:inherit;
}
html{
    box-sizing:border-box; font-size:16px;
    -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
body{
    font-family: var(--font-body);color:var(--color-text);font-size:1em;line-height:1.8;
}
html,body,h1,p{
    padding:0; margin:0;
}
img{
    height:auto; max-width:100%;
}
h1 {
    font-family: var(--font-heading);
    font-size: 2em;
    color: var(--color-primary);
    font-weight: 400;
    line-height: 1.2;
}
p {
    margin-bottom: 4px;
    color: var(--color-text);
    font-size: 1.2em;
}
p.intro {
    margin: 20px 0 30px;
    font-size: 1.3em;
}
b, strong{
    font-weight: 700;
}
a:not([class]) {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: all 0.2s ease-out;
}
a:not([class]):hover {
    color: var(--color-hover);
    text-decoration: underline;
}
.has-text-dark {
    color: var(--color-dark);
}
.button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    font-size:1rem;
    border:1px solid var(--color-primary);
    border-radius:999px;
    box-shadow:none;
    line-height:1.5;
    font-weight: 700;
    font-size: 1.2em;
    background-color:var(--color-primary);
    color:var(--color-white);    
    padding:8px 20px;
    text-align:center;
    white-space:nowrap;
    text-decoration: none;
    user-select:none;
    cursor:pointer;
    transition: all 0.2s ease-out;
    -webkit-touch-callout:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color: transparent;
    background-clip: padding-box;
}
.button:hover,
.button:active,
.button:focus {
    background-color: var(--color-primary-darker);
    border-color: var(--color-primary-darker);
    color:var(--color-white);
    transform: scale(1.01);
}
.button:focus:not(:active){
    box-shadow:0 0 0 .125em rgba(72,95,199,.25);
}
.container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}
.header {
    display: flex;
    justify-content: center;
}
.icons {
    display:flex;
    gap: 0.5rem;
}
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-areas:
    "image"
    "content"
    "socials";
}
.image {
  grid-area: image;
}
.image, 
.image img {
    width: 100%;
}
.content {
  grid-area: content;
}
.socials {
  grid-area: socials;
}
/* Breakpoints */
@media screen and (min-width: 460px) and (max-width: 767px){
    main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px){
    main {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }    
    h1 {
        font-size: 2.6em;
    }
    p.intro {
        font-size: 1.4em;
    }
}

@media screen and (min-width: 1024px) {    
    .container {
        padding-top: 5rem;
    }
    main {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .grid {
        grid-template-columns: 1.1fr 0.9fr;
        grid-template-areas:
        "content image"
        "content socials";
        align-items: start;
        row-gap: 2rem;
        column-gap: 4.5rem;
    }
    .image, 
    .image  img {
        width: auto;
    }
    .socials {
        margin-top: -2rem;
    }
    p.intro {
        font-size: 1.2em;
    }
}