@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'),
    url('../fonts/OpenDyslexic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'),
    url('../fonts/OpenDyslexic-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Italic.woff2') format('woff2'),
    url('../fonts/OpenDyslexic-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Bold-Italic.woff2') format('woff2'),
    url('../fonts/OpenDyslexic-Bold-Italic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*frame styles*/
.frame_light_d {
    border: 2vw solid transparent;
    border-image: url('../images/Border_light_d.webp') 40 repeat;
    background: url('../images/Background_dark.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}
.frame_medium_d {
    border: 2vw solid transparent;
    border-image: url('../images/Border_medium_d.webp') 40 repeat;
    background: url('../images/Background_dark.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}
.frame_dark_d {
    border: 2vw solid transparent;
    border-image: url('../images/Border_dark_d.webp') 40 repeat;
    background: url('../images/Background_dark.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}.frame_light_m {
    border: 2vw solid transparent;
    border-image: url('../images/Border_light_m.webp') 40 repeat;
    background: url('../images/Background_medium.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}
.frame_medium_m {
    border: 2vw solid transparent;
    border-image: url('../images/Border_medium_m.webp') 40 repeat;
    background: url('../images/Background_medium.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}
.frame_dark_m {
    border: 2vw solid transparent;
    border-image: url('../images/Border_dark_m.webp') 40 repeat;
    background: url('../images/Background_medium.webp') repeat;
    background-size: 40vw;
    background-clip: padding-box;
}
.background_light { background-color: #608ca1; }
.background_medium { background: url('../images/Background_medium.webp') }
.background_dark { 
    background: url('../images/Background_dark.webp') repeat;
}
.background_shadowed { background-color: #050202;}

/*text styles*/

.text_basic{
    font-family: 'OpenDyslexic', bold;
    color: #f4f9ea;
    text-shadow: 0.3vw 0.3vw 0 #050202,
    0.1vw 0.1vw 0 #050202,
    -0.1vw 0.1vw 0 #050202,
    0.2vw -0.1vw 0 #050202,
    -0.1vw -0.1vw 0 #050202,
    0.05vw 0.05vw 0 #050202,
    -0.1vw 0.05vw 0 #050202,
    0.05vw -0.05vw 0 #050202,
    -0.05vw -0.05vw 0 #050202;
}
.text_link{
    font-family: 'OpenDyslexic', bold;
    color: #f4f9ea;
    text-shadow: 0.3vw 0.3vw 0 #050202,
    0.1vw 0.1vw 0 #f4f9ea,
    -0.1vw 0.1vw 0 #f4f9ea,
    0.1vw -0.1vw 0 #f4f9ea,
    -0.1vw -0.1vw 0 #f4f9ea,
    0.05vw 0.05vw 0 #f4f9ea,
    -0.1vw 0.05vw 0 #f4f9ea,
    0.05vw -0.05vw 0 #f4f9ea,
    -0.05vw -0.05vw 0 #f4f9ea;
}
.text_light { color: #608ca1; }
.text_dark { color: #244760; }
.text_title { font-size: 3vw; font-weight: bold;}
.text_free {position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.text_margin {width: 90%; transform: translate(5%, 1vw);}
.text_center {text-align: center;}

.section {
    font-size: 1.75vw;
    position: relative;
    font-family: 'OpenDyslexic', sans-serif;
}
.section_basic {
    font-size: 1.75vw;
    height: 50vw;
    position: relative;
    font-family: 'OpenDyslexic', sans-serif;
}
.section_banner {
    height: 25vw;
    position: relative;
    font-family: 'OpenDyslexic', sans-serif;
}
.row {
    display: flex;
}
.column{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.flexible { flex-grow: 1; }
.height_5 { height: 5vw; }
.height_7 { height: 7.5vw; }
.height_10 { height: 10vw; }
.height_15 { height: 15vw; }
.height_25 { height: 25vw; }
.height_50 { height: 50vw; }
.height_55 { height: 55vw; }
.height_75 { height: 75vw; }
.height_100 { height: 100vw; }
.double { flex: 2; }
.triple { flex: 3; }


.icon_size {width: 5vw; height: 5vw;}
.image {
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}

.text {
    font-size: 2vw;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.5s ease;
    font-family: 'OpenDyslexic', sans-serif;
}
.image:hover {
    transform: translate(-50%, -50%) scale(1.2);
    transition: transform 0.3s ease-in-out;
}

.text:hover {
    color: #ff6347;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.social_button {
    display: flex;
    font-family: 'OpenDyslexic', bold;
    color: #f4f9ea;
    text-shadow: 
    0.1vw 0.1vw 0 #f4f9ea,
    -0.1vw 0.1vw 0 #f4f9ea,
    0.1vw -0.1vw 0 #f4f9ea,
    -0.1vw -0.1vw 0 #f4f9ea,
    0.05vw 0.05vw 0 #f4f9ea,
    -0.1vw 0.05vw 0 #f4f9ea,
    0.05vw -0.05vw 0 #f4f9ea,
    -0.05vw -0.05vw 0 #f4f9ea,
    0.3vw 0.3vw 0 #050202;
}
.social_button:hover {
    background-color: #1488b3;
    cursor: pointer;
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}
.social_button:active {
    background-color: #1f3040;
    transition: color 0.1s ease-in-out;
    
}