/* Makes the way the boxes are sized more intuitive */
* {box-sizing:border-box}

/* Insert Sofia Sans Font */
@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
}



body {
    margin: 0;
    padding: 35px;
  
    width: 100%;
    height: 100%;
  
    /* Overflow set to "Hidden" when menu's in use */
    overflow-y: scroll;

    font-weight: bold;
  
    background-image: url(media/openday5nov2023/Lynx1-medium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
    text-align: center;
    justify-content: center;
  
    font-family:'Sofia Sans', Times New Roman;
    }
      
    body::-webkit-scrollbar{
        display: none;
}



.sidebar{
    writing-mode: vertical-lr;
    text-align: left;
    height: 100%;
    width: 75px;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    background-color: #212121c2;
    overflow: hidden;
    padding-top: 20px;
    backdrop-filter: blur(5px);
    }

    button.sidebarbutton{
        width: 100%;
        border-style: none;
        border-radius: 15px;
    
        cursor: pointer;
        background-color: #006eff00;
    
        font-size: 400%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
    }
    
    button.sidebarbutton:hover{
        background-color: #d6c5c9b9;
}

/* Mobile Menu Bar - <800px (functional CSS in the 800px media query) */
.menubar{
    display: none;
}

/* Mobile Overlay Menu - <800px (functional CSS in the 800px media query) */
.mobilemenu{
    display: none;
}


/* CSS Overlay Menu's */
a.sidemenulinks:link {color:#f1f1f1; text-decoration: none;}
a.sidemenulinks:visited {color:#f1f1f1; text-decoration: none;}
a.sidemenulinks:hover {color: #B598CC; text-decoration: none;}


/* Gallery */
.gallery{
        /* Height -> 100% */
        height: 0%;

        width: calc(100% - 275px);

        position: fixed;
        top: 0;
        left: 275px;
        z-index: 2;

        background-color: #b9b9b9c2;
        overflow: hidden;
        font-size: 100%;
    
        display: flex;
        flex-wrap: wrap;

        transition: 0.5s;

        backdrop-filter: blur(5px);
    }

    .gallerymain{
        display: flex;
        flex-wrap: wrap;

        width: 100%;
        height: 100%;

        padding: 10px;

        overflow-y: scroll;
    }

    .gallerymain::-webkit-scrollbar{
        display: none;
    }

    .gallerysidemenu{
        /* Width -> 200px & Padding -> 10px */
        width: 0px;
        padding: 0px;

        height: 100%;

        position: fixed;
        z-index: 4;
        background-color: #4d4d4dc2;
        overflow: hidden;
        top: 0;
        left: 75px;

        transition: 0.5s;

        backdrop-filter: blur(5px);

        font-size: 175%;
        color: white;
    }

    a.gallerylink:link {color:rgb(0, 0, 0); text-decoration: underline;}
    a.gallerylink:visited {color:rgb(0, 0, 0); text-decoration: underline;}
    a.gallerylink:hover {color: #f1f1f1; text-decoration: underline;}
    
        
    /* Main Gallery Div's */
    .galleryopenday, .galleryschematics, .practicalgallery, .videogallery, .swagpictures, .randomgallery{
        width: 100%;
        max-width: 100%;
        
        border-style: solid;
        border-radius: 25px;
        
        text-align: center;
        font-size: 200%;
        
        margin-top: 1%;
        margin-bottom: 1%;
        }
        
        /* Gallery Background Colours */
        .galleryopenday{
            background-color: #5bcefb80;
            }

            .galleryschematics{
             background-color: #F5ABB980;
            }

            .practicalgallery{
                background-color: #ddf072c2; 
            }

            .videogallery{
                background-color: #ffffff80;
            }

            .swagpictures{
                background-color: #7de9bcc2;
            }

            .randomgallery{
                background-color: #c381f8c2;
        }

        /* Ensures Full Size - for some reason... */
        .gallerycover{
            height: 100%;
            width: 100%;
        }

        .galleryheader{
            width: 100%;
            margin: 25px;
        }
        
        .galleryrow{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
        }
        
        .gallerycolumn1, .gallerycolumn2, .gallerycolumn3{
            flex: 33;
            max-width: 33%;

            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }
        
        .galleryitem1, .galleryitem2, .galleryitem3{
            border-radius: 25px;
            
            width: 99%;
            height: auto;    
            margin-left: 1%;
            
            margin-bottom: 15px;
            
            background-color: #E2C4D8c2;
            
            padding: 5px; 
            
            border: solid;
            
            float: left;
        }
            
        .galleryitem1 img, .galleryitem2 img, .galleryitem3 img{
            width: 94%;
            border-radius: 25px;
        
            margin: 15px;
        
            transition: transform .2s;
        }
            
        .galleryitem1 img:hover, .galleryitem2 img:hover, .galleryitem3 img:hover{
            transform: scale(1.03);
        }
            
        .galleryitem1 video, .galleryitem2 video, .galleryitem3 video{
            padding: 5px;
            width: 95%;
            border-radius: 25px;      
        }

        .galleryrowitem{
            border-radius: 25px;

            width: 98%;
            height: auto;    
            margin-left: 1%;

            margin-bottom: 15px;

            background-color: #E2C4D8c2;

            padding: 5px; 

            border: solid;

            float: left;
        }

        .galleryrowitem img{
            padding: 5px;
            max-width: 100%;

            border-radius: 25px;
            transition: transform .2s;
        }

        .galleryrowitem img:hover{
            transform: scale(1.01);
        }

        .videocolumn1, .videocolumn2{
            flex: 49.5%;
            max-width: 49.5%;
        }
    
        video.jetengine, video.lynx{
            padding: 5px;
            width: 100%;
            aspect-ratio: 16 / 9;
            border-radius: 25px;
}





.log {
        /* Height -> 100% */
        height: 0%;

        width: calc(100% - 275px);
        position: fixed;
        z-index: 1;
        top: 0;
        left: 275px;
        background-color: #d6c5c9b9;
        overflow: hidden;
        transition: 0.5s;
        font-size: 85%;
    
        display: flex;
        flex-wrap: wrap;

        backdrop-filter: blur(5px);
    }
    
    .logmain{
        display: flex;
        flex-wrap: wrap;

        width: 100%;
        height: 100%;

        padding: 10px;

        overflow-y: scroll;
    }

    .logmain::-webkit-scrollbar{
        display: none;
}

    .logsidemenu{
        /* Width -> 200px & Padding -> 10px */
        width: 0px;
        padding: 0px;

        height: 100%;

        position: fixed;
        z-index: 4;
        background-color: #4d4d4dc2;
        overflow: hidden;
        top: 0;
        left: 75px;

        transition: 0.5s;

        backdrop-filter: blur(5px);

        font-size: 175%;
        color: white;
    }
    
    .logblue, .logpink, .loggreen, .logyellow, .lognotice{
        height: auto;
        width: 100%;
        max-width: 100%;
        border-style: solid;
        border-radius: 25px;
        background-color: #5bcefb80;
        padding: 25px;
        margin-bottom: 10px;
        text-align: left;
    }
    
    .logpink{
            background-color: #F5ABB980;
    }
    
    .loggreen{
            background-color: #5fee3380;
    }

    .logyellow{
            background-color: #ddf072c2;
    }

    .lognotice{
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.63);
        font-size: 65%;
    }
     
    .collapsiblelog {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 100%;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #000000;
        cursor: pointer;
        padding: 18px;
        width: 98%;
        border: none;
        text-align: left;
        }
      
        .collapsiblelog:after {
          content: '\2228';
          color: white;
          float: right;
          margin-left: 5px;
        }
      
        .activelog:after {
          content: "\2227";
        }
      
        .contentlog {
          font-family:'Sofia Sans', Times New Roman;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
          background-color: #ff003300;
    }
    
    object.database{
        height: 750px;
        width: 100%;
    }

    code{
        background-color: black;
        color: white;
        border-radius: 10px;
        padding: 3px;
        font-weight: 200;
    }
  



.main{
    border-radius: 25px;

    margin-left: 75px;
    
    max-width: 100%;
    height: 100%;

    padding: 15px;

    background-color: #D6C5C9a4;

    overflow-y: scroll;
    }

    .main::-webkit-scrollbar{
        display: none;
    }

    .mainflex{
    display: flex;
    flex-direction: row;
}



.left{
    flex: 15%;
    max-width: 15%;

    border-radius: 25px;

    color: white;

    height: 100%;

    padding: 5px;
    padding-bottom: 10px; 
    background-color: #6D76A7;
    }

    .menuimages{
        width: 100%;
        height: auto;
    }

    .menuflex{
        display: flex;
        flex-direction: column;
    }

    .menuleft{
        flex: 100%;
    }

    .menuright{
        flex: 100%;
    }

    img.menubutterfly{
        max-width: 95%;
        margin-top: 5px;
    }

    img.menuvista{
        max-width: 95%;
        margin-top: 5px;
    }

    .collapsiblemenu {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 135%;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #6D76A7;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
    }
      
      .collapsiblemenu:after {
        content: '\2228';
        color: white;
        float: right;
        margin-left: 5px;
        background-color: #6D76A7;
    }
    
      .activemenu{
        background-color: #bbb;
    }
    
      .activemenu:after {
        content: "\2227";
        background-color: #bbb;
    }
      
      .contentmenu {
        font-family:'Sofia Sans', Times New Roman;
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #6D76A7;
        font-size: 125%;
}

a.menulinks:link {color:white; text-decoration: none;}
a.menulinks:visited {color:white; text-decoration: none;}
a.menulinks:hover {color: #E2C4D8; text-decoration: none;}

a.menulinksdarker:link {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:visited {color:rgba(255, 255, 255, 0.63); text-decoration: none;}
a.menulinksdarker:hover {color: white; text-decoration: none;}


.centerhidden{
    flex: 57.5%;
    max-width: 57.5%;
    height: auto;
    }

    .centervisible{
    border-radius: 25px;
    margin-left: 1%;
    margin-right: 1%;
    height: auto;
    width: 98%;
    padding: 2.5%;
    background-color: #ebd9dd44;
    font-size: 100%;
}



.collapsiblecenter {
    font-family:'Sofia Sans', Times New Roman; 
    font-size: 100%;
    color: white;
    text-align: center;
    margin: 5px;
    border-radius: 25px;
  
    background-color: #B598CC;
    cursor: pointer;
    padding: 18px;
    width: 98%;
    border: none;
    text-align: left;
    }
  
    .collapsiblecenter:after {
      content: '\2228';
      color: white;
      float: right;
      margin-left: 5px;
    }
  
    .activecenter:after {
      content: "\2227";
    }
  
    .contentcenter {
      font-family:'Sofia Sans', Times New Roman;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #ff003300;
      border-radius: 25px;
      border: none;
}

a.middlelinks:link {color:#551A8B; text-decoration: none;}
a.middlelinks:visited {color:#551A8B; text-decoration: none;}
a.middlelinks:hover {color: #c484e4; text-decoration: none;}

a.noticelink:link {color:rgb(218, 59, 59); text-decoration: underline;}
a.noticelink:visited {color:rgb(218, 59, 59); text-decoration: none;}
a.noticelink:hover {color:rgb(232, 255, 25); text-decoration: none;}

/* Disable display: none; if the element needs to be visible!!! */
.warning{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;

    
    /* display: none; */
    
    /* Disable display: none; if the element needs to be visible!!! */
}

.mobilelogo{
    display: none;
}


.about{
    border-radius: 25px;
    width: 100%;
    height: auto;    
    margin-bottom: 15px;
    background-color: #E2C4D8c2;
    padding: 5px; 
    border: solid;
}


.nextcloud{
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }

    h2.aligntext{
        text-align: left;
    }

    img.nextcloudimg{
        float: right;
        height: 200px;
        padding: 15px;
    }

    object.filetree{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}


.theory{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }

    .theoryleft{
        flex: 50%;
    }
    .theoryright{
        flex:50%;
        padding-top: 9%;
}


.hangar{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .hangarleft{
        flex: 50%;
        padding-top: 6%;
    }
    .hangarright{
        flex:50%;
}


.reports{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .reportsleft{
        flex: 50%;
    }
    .reportsright{
        flex:50%;
        padding-top: 13%;
}


.manuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .manualsleft{
        flex: 50%;
        padding-top: 5%;
    }
    .manualsright{
        flex:50%;
}


.jellyfin{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .pdfnotice{
        display: none;
    }
    img.jellyfinimg{
        float: right;
        height: 300px;
        padding: 5px;
    }
    iframe.library{
        border-radius: 25px;
        height: 750px;
        width: 100%;
}


.simulators{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .simulatorsleft{
        flex: 50%;
        padding-top: 0%;
    }
    .simulatorsright{
        flex:50%;
        padding-top: 0%;
    }
    img.simimg{
        width: 97.5%;
        border-radius: 25px;
        padding: 5px;
}



.qrcodes{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    .qrcodes1{
        flex: 25%;
    }
    .qrcodes2, .qrcodes3, .qrcodes4{
        flex: 25%;
        border-style: none none none dashed;
    }
    img.qrcodesimg{
        max-width: 75%;
        border-radius: 25px;
}


.calendar{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;

    padding: 5px; 

    border: solid;
    }
    iframe.icalendar{
        border-radius: 25px;
        height: 750px;
        width: 95%;
        padding: 5px; 
        border: solid;
}


.schedule{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: #E2C4D8c2;
    border: solid;
}



.dockerstatus{
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);
    border: solid;
}



.supplies{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .suppliesleft{
        flex: 50%;
        padding-top: 4%;
    }
    .suppliesright{
        flex:50%;
}



.referencemanuals{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .referencemanualsleft{
        flex: 50%;
    }
   .referencemanualsright{
        flex:50%;
}


.code{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .codeleft{
        flex: 50%;
        padding-top: 5%;
    }
    .coderight{
        flex:50%;
}


.itsetup{
    display: flex;
    flex-direction: row;
    
    border-radius: 25px;

    width: 100%;
    height: auto;    

    margin-bottom: 15px;

    background-color: rgba(255, 255, 255, 0.63);

    padding: 5px; 

    border: solid;
    }
    .itsetupleft{
        flex: 50%;
    }
    .itsetupright{
        flex:50%;
        padding-top: 3%;
}




.right{
    flex: 27.5%;
    max-width: 27.5%;
    height: 100%; 
    background-color: #ebd9dd44;;
    padding: 10px;
    border-radius: 35px;

}

.rightcolumn{
    padding: 10px;
    border-radius: 35px;
    background-color: #D6C5C9a4;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }
    span.rightcolumnnotice{
        font-size: 300%;
        text-align: center;
        margin: 10px;
        width: 100%;
        max-width: 100%;
    }
    .rightcolumn1, .rightcolumn2, .rightcolumn3{
        flex: 100%;
        max-width: 100%;
}


a.rightlinks:link {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:visited {color:rgb(0, 0, 0); text-decoration: underline;}
a.rightlinks:hover {color: #EBD9DD; text-decoration: underline;}


.amc{
    border-radius: 25px;
    width: 100%;
    height: auto;
    padding-top: 10px;
    background-color: rgb(77, 141, 179);
    margin-bottom: 15px;
    border-style: solid;    
    }
    img.amc66{
        max-width: 95%;
        border-radius: 25px;
        border-style: solid; 
        border-color: black;
}

/*AMC Notices*/
.amcnotice1, .amcnotice2{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #4D8DB3;
    margin-bottom: 15px;
    border-style: solid;
    }
    img.amcnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
}

/* Vista - ACC relevant Notices*/
.newyear, .breakfest{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-image: linear-gradient(to right, #ec644a, #448cd0);
    margin-bottom: 15px;
    border-style: solid;
    }

/* Vista Notices*/
.elective, .orientationday, .mijnvista{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.vistanotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }


/*ACC Notices*/
.door, .news{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #448cd0;
    margin-bottom: 15px;
    border-style: solid;
    }

    img.accnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

    
/*Swag Aviation Notices*/
.mobilelayout{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
    overflow-x: hidden;
    }

    img.swagnotice{
        max-width: 95%;
        border-radius: 25px;
        margin: 10px;
        border-style: solid;
        border-color: black;
    }

/*
.openevening{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}

.skills{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #B598CC;
    margin-bottom: 15px;
    border-style: solid;
}

.openday{
    flex: 100%;
    max-width: 100%;
    border-radius: 25px;
    height: auto;
    padding: 5px;
    background-color: #ec644a;
    margin-bottom: 15px;
    border-style: solid;
}
*/



.bottominfo{
    border-radius: 25px;
    margin-top: 1%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottom::-webkit-scrollbar{
        display: none;
    }

    .info{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    a.bottomlink:link {color:#121d83; text-decoration: underline;}
    a.bottomlink:visited {color:#121d83; text-decoration: none;}
    a.bottomlink:hover {color:#279494; text-decoration: none;}

    .personalcontact{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: 100%;   
    }

    .acccontact{
        flex: 34%;
        max-width: 34%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
        overflow-x: scroll;
    }
    .acccontact::-webkit-scrollbar{
        display: none;
    }


    .karlijn{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }

    span.contactblack{
        font-size: 140%;
        color: rgb(0, 0, 0);
        margin: 1px;
        text-align: center;
    }

    span.contactblue{
        font-size: 140%;
        color: #0d1988;
        margin: 1px;
        text-align: center;
}


.bottomnotice{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }

    .bottomnotice::-webkit-scrollbar{
        display: none;
    }

    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .noticetext{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;   
    }

    .artcredit{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;  

        border-style: none none none dashed;
    }

    .artlinks{
        width: 100%;
        height: auto;
    }

    .acclogo{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }
    img.bottomacclogo{
        max-width: 100%;
        padding-top: 12.5%;
    }

    .amclogo{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;
    }

    img.bottomamclogo{
        max-width: 100%;
        padding-top: 17.5%;
}


.bottomlogos{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    overflow-y: hidden;
    }

    .logos{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .unraid{
        flex: 13%;
        max-width: 13%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .docker{
        flex: 14%;
        max-width: 14%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .mariadb{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nextcloudlogo{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .jellyfinlogo{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .handbrake{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .ytdl{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .ytdlp{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .delugevpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .protonvpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nginx{
        flex: 8%;
        max-width: 8%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .cloudflare{
        flex: 12%;
        max-width: 12%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }




@media (max-width: 1200px){
    .gallerycolumn1, .gallerycolumn2{
        flex: 50%;
        max-width: 50%;
    }

    .galleryitem1, .galleryitem2{
        width: 98%;
    }

    .gallerycolumn3{
        flex: 99%;
        max-width: 99%;

        flex-direction: row;
    }
    
    .galleryitem3{
        width: 49%;
    }

    .mainflex{
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .centerhidden{
        flex: 75%;
        max-width: 75%;
        margin-bottom: 5px;
    }

    .simulatorsright{
        padding-top: 10%;
    }

    .mainflex{
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .centerhidden{
        flex: 75%;
        max-width: 75%;
        margin-bottom: 5px;
    }

    .simulatorsright{
        padding-top: 10%;
    }

    /*Nextcloud elements*/
    h2.aligntext{
        text-align: left;
        }

        img.nextcloudimg{
            float: right;
            height: 200px;
            padding: 15px;
        }

        object.filetree{
            border-radius: 25px;
            height: 750px;
            width: 100%;
    }

.theoryleft, .hangarleft, .reportsleft, .manualsleft, .simulatorsleft, .suppliesleft, .referencemanualsleft, .codeleft, .itsetupleft{
    padding-top: 0%;
}

.theoryright, .hangarright, .reportsright, .manualsright, .simulatorsright, .suppliesright, .referencemanualsright, .coderight, .itsetupright{
    padding-top: 0%;
}

.right{
    flex: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
        
    .rightcolumn1, .rightcolumn2, .rightcolumn3{
        flex: 32%;
        max-width: 32%;
        height: 100%;
        margin-right: 0.66%;
        margin-left: 0.66%;
    }
 
    img.bottomacclogo{
        padding-top: 60%;
        }
        
    img.bottomamclogo{
        padding-top: 35%;
    }
}




@media (max-width: 800px){
    body {
        padding: 2px;

        height: calc(100% - 60px);
        top: 50px;
        position: fixed;

        font-size: 75%;
    }

    .sidebar{
        display: none;
    }

    /* Mobile Menu Bar - <800px*/
    .menubar{
        display: flex;
        flex-direction: row;
        height: 50px;
        width: 100%;
        position: fixed;
        z-index: 4;
        top: 0;
        left: 0;
        background-color: #212121c2;
        overflow: hidden;
        padding: 5px;
        backdrop-filter: blur(5px);
    
        font-size: 75%;
        }
    
        .mainmenu{
        width: 100%;
        height: 100%;
        display: block;
        }
    
        button.menubutton{
        height: 45px;
        width: 32.5%;
        border-style: none;
        border-radius: 15px;
        
        cursor: pointer;
        background-color: #006eff00;
        
        font-size: 225%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
        }
            
        button.menubutton:hover{
        background-color: #d6c5c9b9;
    }



    /* Mobile Log, Gallery & Menu, Menus */
    .logmenu, .gallerymenu, .mobilemenutop{
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;

        overflow-y: scroll;
    }

    .logmenu::-webkit-scrollbar, .gallerymenu::-webkit-scrollbar, .mobilemenutop::-webkit-scrollbar{
        display: none;
    }

    .logmenucenter, .gallerymenucenter{
    width: 100%;
    display: flex;
    flex-direction: row;
    }

    .logmenuleft, .gallerymenuleft{
    width: 50%;
    }

    .logmenuright, .gallerymenuright{
    width: 50%;
    }

    .menubar a{
        width: 100%;
        border-radius: 10px;
        padding: 4px;

        cursor: pointer;
        background-color: #006eff00;

        font-size: 200%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
    }

    .menubar a:hover{
    background-color: #d6c5c9b9;
    }

    button.logclosebutton, button.galleryclosebutton, button.mobilemenuclosebutton{
        height: 40px;
        width: 100%;
        border-style: none;
        border-radius: 15px;

        cursor: pointer;
        background-color: #006eff00;

        font-size: 200%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
    }

    button.logclosebutton:hover, button.galleryclosebutton:hover, button.mobilemenuclosebutton:hover{
        background-color: #d6c5c9b9;
    }



    /* Mobile Overlay Menu - <800px */
    .mobilemenu {
        /* display -> block */
        display: none;
        
        width: 100%;
        height: calc(100% - 50px);
        position: fixed;
        z-index: 2;
        top: 50px;
        left: 0;
        overflow: hidden;
        font-size: 100%;
        
        backdrop-filter: blur(5px);
    }

    .mobilemenumain {
    padding: 5px;
    height: 100%;
    width: 100%;

    overflow-y: scroll;

    display: flex;
    flex-direction: row;

    background-color: #4d4d4dc2;
    color: white;
    }

    .mobilemenumain::-webkit-scrollbar{
    display: none;
    }

        img.mobilemenubutterfly{
        max-width: 95%;
        margin-top: 5px;
        }

        img.mobilemenuvista{
        max-width: 95%;
        margin-top: 75px;
        }

        .mobilemenuleft{
        flex: 50%;
        padding: 10px;
        }

        .mobilemenuright{
        flex: 50%;
        padding: 10px;
        }

        /* Collapsible */
        .mobilecollapsiblemenu {
        font-family:'Sofia Sans', Times New Roman; 
        font-size: 150%;
        color: white;
        text-align: center;
        margin: 5px;
        border-radius: 25px;
      
        background-color: #E2C4D8c2;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        }

        .mobilecollapsiblemenu:after {
        content: '\2228';
        color: white;
        float: right;
        }

        .mobileactivemenu{
        background-color: #E2C4D8c2;
        }

        .mobileactivemenu:after {
        content: "\2227";
        }

        .mobilecontentmenu {
        font-family:'Sofia Sans', Times New Roman;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #bbbbbb00;
        font-size: 150%;
    }

    a.mobilemenulinks:link {color: white;; text-decoration: none;}
    a.mobilemenulinks:visited {color: white; text-decoration: none;}
    a.mobilemenulinks:hover {color: #E2C4D8c2; text-decoration: none;}

    a.mobilemenulinksdarker:link {color:#c9c9c9c2; text-decoration: none;}
    a.mobilemenulinksdarker:visited {color:#c9c9c9c2; text-decoration: none;}
    a.mobilemenulinksdarker:hover {color: white; text-decoration: none;}





    .gallery{
        /* display -> block */
        display: none;

        height: 100%;
        width: 100%;

        left: 0;
        top: 100px;

        font-size: 80%;
        background-color: #4d4d4dc2;
        transition: 0s;
        }

        .gallerymain {
        height: calc(100% - 100px);
        width: 99%;
        max-width: 99%;
        }

        .galleryrow{
        flex-direction: column;
        }

            .gallerycolumn1, .gallerycolumn2, .gallerycolumn3, .videocolumn1, .videocolumn2{
            flex: 99%;
            max-width: 99%;
            }

            .galleryitem1, .galleryitem2, .galleryitem3{
            width: 98%;
    }
        
    .log{
        /* display -> block */
        display: none;
            
        width: 100%;
        height: 100%;
        
        left: 0;
        top: 75px;
        
        font-size: 80%;
        background-color: #4d4d4dc2;
        
        transition: 0s;
    }

    .logmain{
    height: calc(100% - 75px);
    width: 100%;
    max-width: 100%;
    }


    .main{
    max-width: 100%;

    padding: 5px;
    background-color: #D6C5C9a4;
    overflow-y: scroll;

    margin: 5px;
        }

        .mainflex{
            display: flex;
            flex-direction: column;
    }


    .left{
        display: none;
    }

    
    .centerhidden{
        flex: 100%;
        max-width: 100%;
        margin-bottom: 5px;
        }

        .collapsiblecenter {
            font-size: 75%;
        }

        .contentcenter {
            font-size: 90%;
    }

    .mobilelogo{
        display: block;

        border-radius: 25px;

        width: 100%;
        height: auto;    

        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }

        .mobileacc{
            max-width: 45%;
            width: 45%;
        }

        .mobilevista{
            max-width: 45%;
            position: relative;
            margin-left: 5%;
            top: -25px
    }

    .about{
        flex-direction: column;
        border-radius: 25px;
        width: 100%;
        height: auto;    
        margin-bottom: 15px;
        background-color: #E2C4D8c2;
        padding: 5px; 
        border: solid;
    }


    /* Nextcloud Elements */
    h2.aligntext{
        text-align: center;
        }

        img.nextcloudimg{
            width: 100%;
            height: auto;
    }


    .theory, .reports, .hangar, .manuals, .supplies, .referencemanuals, .code, .itsetup{
        flex-direction: column;
        }
        .theoryleft, .reportsleft, .hangarleft, .manualsleft, .suppliesleft, .referencemanualsleft, .codeleft, .itsetupleft{  
            flex:100%;
            padding-top: 0%;
        }
        .theoryright, .reportsright, .hangarright, .manualsright, .suppliesright, .referencemanualsright, .coderight, .itsetupright{
            flex:100%;
            padding-top: 0%;
    }

    .jellyfin{
        flex-direction: column;
    }
        .pdfnotice{
            display: contents;
            width: 100%;
            color: rgb(218, 59, 59);
        }
        iframe.library{
            display: none;
    }

    /* Simulators image */ 
    .simulators{
        flex-direction: column;
    }
        .simulatorsleft{
            flex:100%;
            padding-top: 0%;
        }
        .simulatorsright{
            flex:100%;
            padding-top: 0%;
        }
        img.simimg{
            width: 75%;
    }

    .qrcodes{
        flex-direction: column;
    }
        .qrcodes1{
            flex: 100%;
        }
        .qrcodes2, .qrcodes3, .qrcodes4{
            flex: 100%;
            border-style: dashed none none none;
        }
        img.qrcodesimg{
            width: 50%;
    }

    iframe.icalendar{
        height: 400px;
    }


    .rightcolumn{
        max-width: 100%;
    }

    .right{
        flex: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;
        }

        .rightcolumn1, .rightcolumn2, .rightcolumn3{
            flex: 100%;
            max-width: 100%;
    }




    .info{
        display: flex;
        flex-direction: column;
        }

        .personalcontact{
            flex: 100%;
            max-width: 100%;
        }

        .contact{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
        }

        .karlijn{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
    }


    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }   

        .noticetext, .artcredit{
            flex: 100%;
            max-width: 100%;
            border-style: none none dashed none;
        }

        .acclogo{
            flex: 30;
            max-width: 30%;
            border-style: none;
        }
        img.bottomacclogo{
            max-width: 100%;
            padding-top: 0%;
        }

        .amclogo{
            flex: 70%;
            max-width: 70%;
        }
        img.bottomamclogo{
            max-width: 100%;
            padding-top: 10%;
    }


    .bottomlogos{
        margin-top: 1%;
        }

        .bottomlogos::-webkit-scrollbar{
            display: none;
        }

        .logos{
            flex-wrap: wrap;
        }

        .unraid, .docker, .mariadb, .nextcloudlogo, .jellyfinlogo, .handbrake, .ytdl, .ytdlp, .delugevpn, .protonvpn, .nginx, .cloudflare{
            flex: 16.6%;
            max-width: 16.6%;
        }
}