body{

  background: url(../images/desktop/background.png); 
  background-repeat: no-repeat;
  background-size: cover;
  
}
.container{
    display: flex;
    flex-wrap: wrap;

margin: 20px;
padding:20px 30px;
}














 /**** NAV BAR ****/
.wrappers{
    position:absolute;
  margin-top:40px;
    margin-left:30px;
}
 .bars{
    font-size:60px;
    font-size:vw;
    cursor:pointer;



    color:red;
    }

 .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  

.containerA{
/* Rectangle 74 */


position: absolute;

width: 100%;
height: 722px;
left: 0px;
top: -46px;
background-size: contain;
background: rgba(255, 255, 255, 0.3);
}
.style_container{
    position:relative;
    display:flex;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content:center;
    left: 130px;
    top: -180px;
    
}
.title{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 64px;

    
    color: #860101;
    
}

.content_container{
    position:relative;
    display:flex;
    height: 100vh;
    display: flex;
    flex-direction: column;
    width: 60%;
height: 222px;
left: 100px;
top: -470px;
}
.contents{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    font-size: 2vw;
    transform: translateY(-600px);
    animation: 1.2s slideIn ease-in-out forwards 1s;
    
    color: #000000;
}

  .s_cover{
      width:900px;
      margin: 0 auto;
  }  

.s_cover2{
    width:900px;
    margin: 0 auto;
}  
.a_cover{
    width:900px;
    margin: 0 auto;
}  
.a_letter{
    position: absolute;
    display: flex;
    flex-shrink: 0;
    background: url(../images/A_middle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 50%;
 top:100px;
 left: 900px;
   
  padding-bottom: calc(90% * 3 / 4);
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
  }
.s_letter2{
  position: absolute;
  display: flex;
  flex-shrink: 0;
  background: url(../images/S_top.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 70%;
top:730px;
left: 95px;
 
padding-bottom: calc(90% * 3 / 4);
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
 -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
     animation: fadein 2s;

}
  .s_letter{
    position: absolute;
    display: flex;
    flex-shrink: 0;
    background: url(../images/S_top.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 70%;
 top:-30px;
 left: 160px;
 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
 -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
   -o-animation: fadein 2s; /* Opera < 12.1 */
      animation: fadein 2s;
   
  padding-bottom: calc(90% * 3 / 4);

  }


/****** EXPLORE PAGE TWO*******/
.anatomy{
    position: fixed;

width: 100%;
height: 52px;
text-align:center;
left:40px;
top:40px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 64px;
font-size: 4vw;


color: #860101;

}

#gill_{
    position:relative;
    width: 1004px;
height: 446px;

margin-left:150px;
top:170px;
font-family: Gill Sans;
font-style: normal;
font-weight: 600;
font-size: 260px;
font-size:20vw;
line-height: 310px;

color: #000000;


}
.lines{
    position:relative;
    display:flex;
    flex-direction:row;
     align-items: center;
     left: 192px;
     top: 231px;
    margin-left:-150px;
}
.lines3{
    position:relative;
    display:flex;
    flex-direction:row;
     align-items: center;
     left: 160px;
     top: -65px;
    margin-left:-150px;
}
.lines4{
    position:relative;
    display:flex;
    flex-direction:row;
     align-items: center;
     left: 160px;
     top: -40px;
    margin-left:-150px;
}
#capline{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px; 
    font-size:2vw;
    color: #000000;
    
}
.lines2{
    position:relative;
    display:flex;
    flex-direction:row;
     align-items: center;
     left: 192px;
     top: 250px;
    margin-left:-150px;
}
#meanline{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px; 
    font-size:2vw;
    color: #000000;
    
}
#baseline{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px; 
    font-size:2vw;
    color: #000000;
}
#borderline{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px; 
    font-size:2vw;
    color: #000000;
}

.line1{

    width: 200px;
    width: 60vw;

    border: 1px solid #000000;

}
.line2{
    position:relative;
    max-width: 200px;
    max-width: 64vw;
    left: 192px;
top:294.87px;


}

.line3{
    width: 200px;
    width: 60vw;

    border: 1px solid #000000;


}

.line4{
    width: 200px;
    width: 60vw;

    border: 1px solid #000000;
}




#linkback{
  position: absolute;
width: 138px;
height: 26px;
left: 185px;
top:600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101
 }

#link1{
  position: absolute;
  width: 245px;
  height: 26px;
  left: 331px;
  top:600px;
  
  font-family: Gill Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 34px;
  
  color: #860101;
  
}
#link2{

position: absolute;
width: 245px;
height: 26px;
left: 509px;
top:600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101;
}
:root {
  --mainColor: #860101;
}
a {
  color: var(--mainColor);
  text-decoration: none;
}

a:hover {
  color: transparent;
  text-decoration: none;
  -webkit-text-stroke: 2px var(--mainColor);
}

@supports not(-webkit-text-stroke: 2px red) {
  a:hover {
    text-shadow:
      3px 3px 0 var(--mainColor),
      -1px -1px 0 var(--mainColor),
      1px -1px 0 var(--mainColor),
      -1px 1px 0 var(--mainColor),
      1px 1px 0 var(--mainColor);
  }
}



/******************* ANIMATIONS *************/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideIn {
    100% {
      transform: translateY(0px);
      opacity: 1;
    }

  }


/******************* ANIMATIONS *************/



/* EXPLORE PAGE THREE*/
.maincontent{
    position: absolute;
    width: 100%;
    height:930px;
    left: 0px;
    top: -63px;
    
    background: rgba(255, 255, 255, 0.8);
}
.header{
 position: relative;

    padding:30px;
    text-align:center;


    top: 52px;
}
.svg_background{
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: url(../images/background_explore.svg);
    background-size: cover;
    height: 100%;

    padding-bottom: calc(80% * 3 / 4);
    left: 16px;
top: 22px;

}
.characteristics{
    position:relative;

width:60%; /* in case of longer text */
font-family: Gill Sans;
font-style: normal;
font-weight: bold;
font-size: 60px;
line-height: 69px;
text-align: center;
top:90px;
color: #00247D;

}
.desc_{
    position:relative;
display:flex;
flex-wrap:wrap;
flex-direction:row;



}
#main-container {
    display: flex;
    position:relative;
    top:200px;
    justify-content: space-between;
    align-items: center;
    margin-left:30px;
  }
  
  #center-content {
   
    /* Lets middle column shrink/grow to available width */
    flex: 1 1 auto;

  }
  
  #left-content,
  #right-content {
      text-align:center;
    /* Forces side columns to stay same width */
    flex: 0 0 100px;
  }
  
  
 
.description{
   
position:relative;


    font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size:30px;

line-height: 28px;
color: #000000;



}

.desc_B{

    flex:20%;
    background-color:yellow;
    padding: 20px;
}
.light{


font-family: Gill Sans;
font-style: normal;
font-weight: 300;
font-size: 40px;
color: #00247D;

/* identical to box height */


}
.regular{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;

    
    color: #00247D;
}

.semibold{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;

    /* identical to box height */
    
    color: #00247D;
}
.ultrabold{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: 900;
    font-size: 20px;

    color: #00247D;
}
.lightitallic{
    font-family: Gill Sans;
    font-style: italic;
    font-weight: 300;
    font-size:45px;
 
    /* identical to box height */
    
    color: #00247D
}
.light_o{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: 300;
    font-size: 70px;

    /* identical to box height */
    
    color: #00247D;
}
.regular_o{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 70px;
    line-height: 80px;
    
    color: #00247D;
}

.bold_o{

    font-family: Gill Sans;
    font-style: normal;
    font-weight: 900;
    font-size: 70px;
    line-height: 87px;
    
    color: #00247D;
}
.semibold_o{
font-family: Gill Sans;
font-style: normal;
font-weight: 600;
font-size: 70px;
line-height: 84px;
/* identical to box height */

color: #00247D;
}
.ultrabold_o{
    font-family: Gill Sans;
    font-style: normal;
    font-weight: 900;
    font-size: 70px;
    line-height: 87px;
    
    color: #00247D;   

}

.light_letters{
display:flex;
flex-direction: column;
font-family: Gill Sans;
font-style: normal;
font-weight: 300;
font-size: 30px;

/* identical to box height */


}


 






/****** FOR MININMIZED BROWSER****/
@media screen and (max-width:800px) {
  body{
    background: url(../images/mobile/background.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

  #contents{
      width:80%
  }
  .container{
      display:flex;
      width:100%;
  }

 .description{
margin-left: 0px;
font-size: 4vw;
 }  
.light{
     font-size: 6vw;

 }
 .regular{
     font-size: 3vw;

 }
 .semibold{
     font-size: 3vw; 
 }
 .ultrabold{
     font-size: 2vw;
 }
 .semibold_o,.regular_o,.ultrabold_o,.light_o,.bold_o{
     font-size: 10vw;  
 }

 .characteristics{
     margin:0 0  0;

     font-size:9vw;
     padding:0px;
   
 }
 #main-container {
     display: flex;
     position:relative;
     top:100px;
     justify-content: space-between;

 
   }
   
   #center-content {
    
     /* Lets middle column shrink/grow to available width */
     flex: 100%;
     width:30%;
     padding:10px;
 
   }
   
   #left-content,
   #right-content {
       text-align:center;
     /* Forces side columns to stay same width */
     flex: 10%;
 
   }
   .s_cover2{
     width:900px;
     margin: 0 auto;
 }  
 .a_cover{
     width:900px;
     margin: 0 auto;
 }  
 .a_letter{
     position: absolute;
     display: flex;
     flex-shrink: 0;
     background: url(../images/A_middle.svg);
     background-size: contain;
     background-repeat: no-repeat;
     width: 100%;
  top:130px;
  left: 400px;
    
   padding-bottom: calc(90% * 3 / 4);
 
   }
 .s_letter2{
   position: absolute;
   display: flex;
   flex-shrink: 0;
   background: url(../images/S_top.svg);
   background-size: contain;
   background-repeat: no-repeat;
   width: 100%;
top:750px;
left: 95px;
  
 padding-bottom: calc(90% * 3 / 4);

 }
   .s_letter{
       
       width:100%;
       top: 70px;
       left: 70px;
         
        padding-bottom: calc(90% * 3 / 4);
   }

   .contents{
     margin-top:30px;
       font-size:3.5vw;
   }
   .style_container{
     position:relative;
     display:flex;
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: left;
     justify-content:center;
     left: 100px;
     top: -120px;
     
 }
 .svg_background{
 top:200px;
     height:60%;
 }
 .title{
     font-size:10vw;
 }
   .content_container{
       top:-470px;
   }

   #linkback{
    position: absolute;
width: 138px;
height: 26px;
left:50px;
top:  620px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101
   }

 #link1{
    position: absolute;
    width: 245px;
    height: 26px;
    left:150px;
    top:  620px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 34px;
    
    color: #860101;
    
  }
  #link2{

position: absolute;
width: 245px;
height: 26px;
left: 280px;
top:  600px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101;
  }
  :root {
    --mainColor: color: #00247D;
  }
  a {
    color: var(--mainColor);
    text-decoration: none;
  }
  
  a:hover {
    color: transparent;
    text-decoration: none;
    -webkit-text-stroke: 2px var(--mainColor);
  }
  
  @supports not(-webkit-text-stroke: 2px red) {
    a:hover {
      text-shadow:
        3px 3px 0 var(--mainColor),
        -1px -1px 0 var(--mainColor),
        1px -1px 0 var(--mainColor),
        -1px 1px 0 var(--mainColor),
        1px 1px 0 var(--mainColor);
    }
  }
}



   /**** RESPONSIVE PART ***/


/*iPhone X in portrait & landscape*/
    @media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) { 
       body{
         background:url(../images/mobile/background.png);
         background-repeat: no-repeat;
         
       }
             #contents{
                 width:80%
             }
             .container{
                 display:flex;
                 width:100%;
             }
         
            .description{
          font-size: 4vw;
            }  
        .light{
                font-size: 6vw;
        
            }
            .regular{
                font-size: 3vw;
        
            }
            .semibold{
                font-size: 3vw; 
            }
            .ultrabold{
                font-size: 2vw;
            }
            .semibold_o,.regular_o,.ultrabold_o,.light_o,.bold_o{
                font-size: 10vw;  
            }
        
            .characteristics{
                margin:0 0  0;
        
                font-size:9vw;
                padding:0px;
              
            }
            #main-container {
                display: flex;
                position:relative;
                top:100px;
                justify-content: space-between;
    
            
              }
              
              #center-content {
               
                /* Lets middle column shrink/grow to available width */
                flex: 100%;
                width:30%;
                padding:10px;
            
              }
              
              #left-content,
              #right-content {
                  text-align:center;
                /* Forces side columns to stay same width */
                flex: 10%;
            
              }
              .s_cover2{
                width:900px;
                margin: 0 auto;
            }  
            .a_cover{
                width:900px;
                margin: 0 auto;
            }  
            .a_letter{
                position: absolute;
                display: flex;
                flex-shrink: 0;
                background: url(../images/A_middle.svg);
                background-size: contain;
                background-repeat: no-repeat;
                width: 100%;
             top:130px;
             left: 200px;
               
              padding-bottom: calc(90% * 3 / 4);
            
              }
            .s_letter2{
              position: absolute;
              display: flex;
              flex-shrink: 0;
              background: url(../images/S_top.svg);
              background-size: contain;
              background-repeat: no-repeat;
              width: 100%;
           top:650px;
           left: -90px;
             
            padding-bottom: calc(90% * 3 / 4);
          
            }
              .s_letter{
                  
                  width:100%;
                  top: 70px;
                  left:-700px;
                    
                   padding-bottom: calc(90% * 3 / 4);
              }
    
              .contents{
                  font-size:3.5vw;
              }
              .style_container{
                position:relative;
                display:flex;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: left;
                justify-content:center;
                left: 100px;
                top: -100px;
                
            }
            .svg_background{
   margin-left:-20px;
            top:200px;
            width:100%;
                height:60%;
            }
            .title{
                font-size:10vw;
            }
              .content_container{
                  top:-470px;
              }
              #contents{
                width:80%
            }
            .container{
                display:flex;
                width:100%;
            }
        
           .description{
         font-size: 4vw;
           }  
       .light{
               font-size: 6vw;
       
           }
           .regular{
               font-size: 3vw;
       
           }
           .semibold{
               font-size: 3vw; 
           }
           .ultrabold{
               font-size: 2vw;
           }
           .semibold_o,.regular_o,.ultrabold_o,.light_o,.bold_o{
               font-size: 10vw;  
           }
       
           .characteristics{
             
               top:-30px;
             
           }
           #main-container {
               display: flex;
               position:relative;
               top:100px;
               justify-content: space-between;
   
           
             }
             
             #center-content {
              
               /* Lets middle column shrink/grow to available width */
           margin-top:-110px;
        
           
             }
             
             #left-content,
             #right-content {
                 text-align:center;
               /* Forces side columns to stay same width */
               flex: 10%;
           
             }
             .s_cover2{
               width:900px;
               margin: 0 auto;
           }  
           .a_cover{
               width:900px;
               margin: 0 auto;
           }  
           .a_letter{
               position: absolute;
               display: flex;
               flex-shrink: 0;
               background: url(../images/A_middle.svg);
               background-size: contain;
               background-repeat: no-repeat;
               width: 100%;
            top:130px;
            left: 200px;
              
             padding-bottom: calc(90% * 3 / 4);
           
             }
           .s_letter2{
             position: absolute;
             display: flex;
             flex-shrink: 0;
             background: url(../images/S_top.svg);
             background-size: contain;
             background-repeat: no-repeat;
             width: 100%;
          top:650px;
          left: 95px;
            
           padding-bottom: calc(90% * 3 / 4);
         
           }
             .s_letter{
                 
                 width:100%;
                 top: 70px;
                 left: 70px;
                   
                  padding-bottom: calc(90% * 3 / 4);
             }
   
             .contents{
                 font-size:3.5vw;
             }
             .style_container{
               position:relative;
               display:flex;
               height: 100vh;
               display: flex;
               flex-direction: column;
               align-items: left;
               justify-content:center;
               left: 100px;
               top: -100px;
               
           }
           .svg_background{
           top:200px;
               height:60%;
           }
           .title{
               font-size:10vw;
           }
             .content_container{
                 top:-470px;
             }
             #linkback{
              position: absolute;
    width: 138px;
    height: 26px;
    left:50px;
    top:  750px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 60px;
    line-height: 34px;
    
    color: #860101;
            }
        #link1{
          position: absolute;
          width: 245px;
          height: 26px;
          left:150px;
          top:  770px;
          
          font-family: Gill Sans;
          font-style: normal;
          font-weight: normal;
          font-size: 30px;
          line-height: 34px;
          
          color: #860101;
          
        }
        #link2{
    
    position: absolute;
    width: 245px;
    height: 26px;
    left: 280px;
    top:  750px;
    
    font-family: Gill Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 60px;
    line-height: 34px;
    
    color: #860101;
        }
        :root {
          --mainColor: color: #00247D;
        }
        a {
          color: var(--mainColor);
          text-decoration: none;
        }
        
        a:hover {
          color: transparent;
          text-decoration: none;
          -webkit-text-stroke: 2px var(--mainColor);
        }
        
        @supports not(-webkit-text-stroke: 2px red) {
          a:hover {
            text-shadow:
              3px 3px 0 var(--mainColor),
              -1px -1px 0 var(--mainColor),
              1px -1px 0 var(--mainColor),
              -1px 1px 0 var(--mainColor),
              1px 1px 0 var(--mainColor);
          }
        }  
    }



   

/**** RESPONSIVE PART ***/




/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
.style_container{
  top:-100px;
}
       #contents{
       
           width:80%
       }
     
       .container{
           display:flex;
           width:100%;
       }
   
      .description{
    font-size: 4vw;
      }  
  .light{
          font-size: 6vw;
  
      }
      .regular{
          font-size: 3vw;
  
      }
      .semibold{
          font-size: 3vw; 
      }
      .ultrabold{
          font-size: 2vw;
      }
      .semibold_o,.regular_o,.ultrabold_o,.light_o,.bold_o{
          font-size: 10vw;  
      }
  
      .characteristics{
          margin:0 0  0;
  
          font-size:9vw;
          padding:0px;
        
      }
      #main-container {
          display: flex;
          position:relative;
          top:100px;
          justify-content: space-between;

      
        }
        
        #center-content {
         
          /* Lets middle column shrink/grow to available width */
          flex: 100%;
          width:30%;
          padding:10px;
      
        }
        
        #left-content,
        #right-content {
            text-align:center;
          /* Forces side columns to stay same width */
          flex: 10%;
      
        }
        .s_cover2{
          width:900px;
          margin: 0 auto;
      }  
      .a_cover{
          width:900px;
          margin: 0 auto;
      }  
      .a_letter{
          position: absolute;
          display: flex;
          flex-shrink: 0;
          background: url(../images/A_middle.svg);
          background-size: contain;
          background-repeat: no-repeat;
          width: 100%;
       top:130px;
       left: -900px;
         
        padding-bottom: calc(90% * 3 / 4);
      
        }
      .s_letter2{
        position: absolute;
        display: flex;
        flex-shrink: 0;
        background: url(../images/S_top.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
     top:850px;
     left: 95px;
       
      padding-bottom: calc(90% * 3 / 4);
    
      }
        .s_letter{
            
            width:100%;
            top: 70px;
            left: 80px;
              
             padding-bottom: calc(90% * 3 / 4);
        }

        .contents{
     
            font-size:3.5vw;
        }
        .style_container{
          position:relative;
          display:flex;
          height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: left;
          justify-content:center;
          left: 100px;
          top: -100px;
          
      }
      .svg_background{
        background:Url(../images/ipad/Vector\ 30.png);
        background-repeat: no-repeat;
 
      top:300px;
      left:0px;
          height:100vh;
      }
      .title{
        top:-100px;
          font-size:10vw;
      }
        .content_container{
            top:-600px;
        }
        .description{
          position: absolute;
width: 499px;


top: 60px;
left:100px;
font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;

color: #000000;

        }
        #linkback{
          position: absolute;
width: 138px;
height: 26px;
left: 126px;
top: 827px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101;
        }
    #link1{
      position: absolute;
      width: 245px;
      height: 26px;
      left: 260px;
      top: 827px;
      
      font-family: Gill Sans;
      font-style: normal;
      font-weight: normal;
      font-size: 30px;
      line-height: 34px;
      
      color: #860101;
      
    }
    #link2{

position: absolute;
width: 245px;
height: 26px;
left: 454px;
top: 826px;

font-family: Gill Sans;
font-style: normal;
font-weight: normal;
font-size: 60px;
line-height: 34px;

color: #860101;
    }
    :root {
      --mainColor: color: #00247D;
    }
    a {
      color: var(--mainColor);
      text-decoration: none;
    }
    
    a:hover {
      color: transparent;
      text-decoration: none;
      -webkit-text-stroke: 2px var(--mainColor);
    }
    
    @supports not(-webkit-text-stroke: 2px red) {
      a:hover {
        text-shadow:
          3px 3px 0 var(--mainColor),
          -1px -1px 0 var(--mainColor),
          1px -1px 0 var(--mainColor),
          -1px 1px 0 var(--mainColor),
          1px 1px 0 var(--mainColor);
      }
    }  
    
}