/*Angiver fonten*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400&display=swap');

/*Angiver bagrundsfarven på hele bodyen, samt margen og font-family.*/
body {
    background-color: #f9f6f0;
    margin: 0;
    font-family:'Oswald', sans-serif;   
}
/*Angiver font-family på knapperne, og input (placehodler content og option i vores 'sign up form'.*/
button, input, option {
    font-family:'Oswald', sans-serif;   
}

/* Classen tekst, h1, h2, h3 og h4 har en generel regel om at farven skal være det den sat til. Medmindre andet er angivet. */

.tekst, h1, h2, h3, h4 {
    color: #494848;
}

/*Classen Tekst bliver primært brugt ved tagget P, og angiver størrelsen på fonten. Medmindre andet er angivet på de andre sider. */
.tekst {
    font-size: 16px;

}

/*Navigation her har vi baggrundsfarve, tekstfarve som skal være hvid på vores nav. 
Og overflow hidden som gemmer elementer på navigationsbaren, hvis andet angives. 
https://www.w3schools.com/cssref/pr_pos_overflow.php
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
.navigation {
    background-color: #2b4257;
    overflow: hidden;
    color: #ffffff;

}

/*Navigation a angiver forskellige størrelsesforhold til vores content i vores navbar, såsom fællesskab, sport og kontakt.
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
.navigation a {
    float: left;
    display: block;
    color: #ffffff;
    padding: 20px 20px;
    font-size: 20px;
    text-decoration: none;
    justify-content: center;
    font-weight: normal;
    position: sticky;
}

/*Her har vi lavet styling på, når brugeren bevæger sig over de forskellige links i navbaren samt footeren.*/
.navigation a:hover, footer a:hover {
    text-decoration: underline;

}

a:link, a:visited {
    color: #ffffff;
    text-decoration: none;
/*Her har vi lavet styling, når brugeren har besøgt et link.*/    
}

/*Hvis skærmen når en størrelse på minimum 701 px, så vil den gemme navigationshamburger ikonet.https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
@media only screen and (min-width: 701px) {
    .fa.fa-bars,
    .icon {
        display: none;
    }
}

/* Display flex gør at logoet er responsivt og følger med, når skærmstørrelsen ændrer sig.*/
.logo a img {
    display: flex;
}

/*Her er der blevet flyttet rundt, så logoet er blevet placeret 4% fra venstre side. 
Vi har inkluderet margin-right, så fællesskabet, sport og kontakt står i højre side.*/
.logo a {
    padding: 0;
    margin-right: 55%;
    margin-left: 4%;
}
/* Vi har lavet noget styling på mySlides, som er billederne i vores billedegalleri fremvist på forsiden. 
Vi har lagt billederne, således de er placeret i midten af skærmen og med lidt margin fra toppen. 
Derudover responderer de ift. procentvis, når skærmstørrelsen ændres. https://www.w3schools.com/w3css/w3css_slideshow.asp*/
.mySlides {
    margin-top: 50px;
    margin-left: 2.8%;
    margin-right: 1.5%;
}
/*Denne class er pilen, som er fremvist på forsiden under billedegalleriet. Den er placeret med margin-left og procenter, 
så den responderer efter skærmstørrelser. https://www.w3schools.com/w3css/w3css_slideshow.asp*/
.w3-left {
    margin-left: 20%;
    cursor: pointer;
    display: inline-block;
}
/*Denne class er pilen, som er fremvist på forsiden under billedegalleriet. Den er placeret med margin-left og right, opsat i procenter, 
så den responderer efter skærmstørrelser. https://www.w3schools.com/w3css/w3css_slideshow.asp*/
.w3-right {
    margin-right: 8%;
    margin-left: 62%;
    cursor: pointer;
    display: inline-block;
}
/*Denne er en class rundt om begge pile på forsiden. Vi har givet den noget luft, så den ikke sidder direkte oppe i vores billedegalleri. https://www.w3schools.com/w3css/w3css_slideshow.asp*/
.w3-center.w3-container.w3-section.w3-large.w3-text-white.w3-display-bottommiddle {
    margin-top: 1%;
}
/*Bruges til at give noget space til venstre side, så vores indhold kommer lidt ind.*/
.move-front {
    margin-left: 35px;
}

/*Disse to knapper er skabt med den hensigt, at de skal fremvises på forsiden på mobile view. Vi har brugt denne hjemmeside til at være sikre på, at vi har opsat dem korrekt. https://www.w3schools.com/csS/css3_buttons.asp*/
.bluebutton1,
.bluebutton2 {
    background-color: #2b4257;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    width: 145px;
    height: 42px;
    

}
/*Denne class er en boks, og den indeholder begge bluebuttons fremvist foroven. De fremvises på forsiden på mobile view, og er placeret i midten*/
.frontbuttons {
    display: inline;
    margin-left: 10%;
}

/*Skjuler de to blå CTA'er på forsiden, når skærmer er på minimum 900 px.*/
@media screen and (min-width: 900px) {
    .frontbuttons {
        display: none;
    }
}

/* Denne class er til vores sign-up button. Dette er formen, den har inden brugeren klikker på den og den udvides. 
https://www.w3schools.com/howto/howto_js_popup_form.asp */
.open-button {
    background-color: #FBB80F;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 145px;
    font-weight: bold;
    font-size: 18px;
    color: #494848;
}

/* Dette er når brugeren har klikket på open-button, og så fremvises formen. https://www.w3schools.com/howto/howto_js_popup_form.asp */
.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #E39603;
    z-index: 9;
}

/* Dette er formen på tilmeldingsformularen.https://www.w3schools.com/howto/howto_js_popup_form.asp  */
.form-container {
    max-width: 300px;
    padding: 10px;
    background-color: #E39603;
}

/*Dette er stylingen på de sektioner inde i vores tilmeldingsformularen.
Så der er en indikation på hvor brugeren skal indsætte sit navn, tlf. nummer og email osv. Derudover er der også en color på fonten.*/
input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: none;
    background: #F0EEEE;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #494848;
}

/*Dette er teksten fremvist foroven af inputfelterne. https://www.w3schools.com/howto/howto_js_popup_form.asp*/
.form-container {
    font-size: 16px;
    color: #494848;
    font-weight: bold;
}

/* Der* skabes fokus, når brugeren typer i inputfelterne i tilmeldingsformularen.*/
.form-container input[type=text]:focus {
    background-color: #F0EEEE;
    outline: none;
}

/*Her er der angivet styling for CTA knappen fremvist inde i tilmeldingsofrmularen, 
og som er tilmeld mig knappen.https://www.w3schools.com/howto/howto_js_popup_form.asp*/
.form-container .btn {
    background-color: #FBB80F;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    color: #494848;
    font-weight: bold;
    font-size: 16px;
}

/*Her er der angivet styling for CTA knappen fremvist inde i tilmeldingsofrmularen, 
og som er LUk knappen.https://www.w3schools.com/howto/howto_js_popup_form.asp*/
.form-container .cancel {
    background-color: #dcbb67;
    font-size: 16px;
    color: #494848;
    font-weight: bold;
}

/*Div. gallery style er den boks, som omfanger vores images og tekst. https://www.w3schools.com/howto/howto_css_image_gallery.asp */
div.gallery {
    border: none;
    margin-top: 5px;
}

/* div.gallery img er det størrelsesforhold vores billede skal have. https://www.w3schools.com/howto/howto_css_image_gallery.asp */
div.gallery img {
    width: 100%;
    height: auto;
}

/*.desc er den lille boks, som indeholder vores tekstbeskrivelser, som er placeret under billedet.Vi har bl.a. lagt den samme farve på, som vores nav.
        Derudover har vi givet den padding, så der er luft mellem teksten og kanten til boksen. Vi har brugt text-align til at centre vores tekst, og givet den en font-size.  https://www.w3schools.com/howto/howto_css_image_gallery.asp*/
.desc {
    padding: 15px;
    text-align: center;
    background-color: #2b4257;
    color: #fff;
    font-size: 16px;
    width: 100%;
    border: none;
}

/*.desc:hover er en "animeret" indikation ved hjælp af CSS på vores tekstboks. Vi har en border på 1px, som er farvet i en mørkebrun farve, således det ligner at boksen har en animation, 
når brugeren kører musen henover feltet. https://www.w3schools.com/howto/howto_css_image_gallery.asp Derudover fandt vi frem via vores tænke-højt test, 
at der manglede en hånd, som indikerede at man kan trykke på knapperne. Derfor tilføjede vi cursor pointer til stylen. https://stackoverflow.com/questions/4678361/how-to-show-the-little-hand-in-a-link-that-doesnt-have-the-href-attribute#4678380*/
.desc:hover {
   border: 1px solid #777;
   cursor:pointer;
}

/*.soctitel er styling på bestemte overskrifter på vores side. Vi har givet den noget margin-bottom og margin-top, således der er noget space
       mellem vores navigationbar samt vores elementer placeret under overskrifterne.Derudover er der angivet en font-size, farve og vægt.*/
.soctitel {
    margin-bottom: 15px;
    margin-top: 3%;
    margin-left: 30px;
    color: #494848;
    
}

/*https://www.w3schools.com/howto/howto_css_image_gallery.asp*/
* {
    box-sizing: border-box;
}

/*.Responsive er den klasse, som vi har rundt om vores div.gallery. Responsive flytter på elementerne,
       således, at vores boks https://www.w3schools.com/howto/howto_css_image_gallery.asp*/
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

/*Media only screen - max-width 700px, angiver hvilken størrelse boksen skal have, når de fremvises på en skærm op til 700 px. https://www.w3schools.com/howto/howto_css_image_gallery.asp*/
@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

/*Media only screen - max-width 500px, angiver hvilken størrelse boksen skal have, når de fremvises på en skærm op til 500 px. https://www.w3schools.com/howto/howto_css_image_gallery.asp*/
@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

/*Denne sørger for, at der ikke er noget indhold som "flyver rundt" efter et floating element. https://www.w3schools.com/howto/howto_css_clearfix.asp https://www.w3schools.com/howto/howto_css_image_gallery.asp**/
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/*Denne class bliver brugt på fællesskabssiden, og angiver noget stylingen til teksterne, som fremvises inde i modalerne*/
.fontklub {
    text-decoration: underline;
    font-weight: bold;
}
/*Når bruges en uordered list medmindre andet er angivet på de andre undersider, så skal der ikke vises nogen punkter mm., når indhold sættes op i lister.*/
ul {
    list-style: none;
}
/*Dette er for at angive størrelsesforhold til vores billede fremvist på overlay siden med referat.*/
.signature {
    width: 20%;
    height: auto;
}

/* Dette er modalerne, som fremvises på fællesskabssiden, og stylingen. https://www.w3schools.com/howto/howto_css_modals.asp  */
.modal,
.modalbow,
.modalgril,
.modalG  {
    display: none;
    /* Gemmer  */
    position: fixed;
    /* Sørger for, at overlayen sidder fast på siden, og ikke rykkes rundt.  */
    z-index: 1;
    /* Sørger for, at det sidder ovenpå alle de andre elementer. */
    left: 0;
    top: 0;
    width: 100%; /* Angiver den fulde bredde */
    height: 100%; /* Angiver den fulde højde */
    overflow: auto; /* Aktiverer scroll, hvis indholdet i overlayen er langt.*/
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Stylingen indeni vores modaler(overlays). Der er noget baggrundsfarve og en border og lidt forskellige højder, paddings. https://www.w3schools.com/howto/howto_css_modals.asp*/
.modal-content, .referat-content,
.bowling-content,
.grill-content {
    background-color: #F9F6F0;
    margin: 15% auto; 
    padding: 20px;
    border: 3px solid #2b4257;
    width: 80%; 
}

/* Dette er modalernes (X) CTA knap, så når brugeren vil lukke overlayen, så er denne fremvist. */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
/*Angiver noget effekt på overlayens (X) knap*/
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* hver sport har sin egen box. */
/* margin right: Er kun her i box-fodbold fordi den blev ved med at hænge fast på badminton.
Efter mange forsøg med alt muligt blev det her løsningen */
.box-badminton, .box-volleyball, .box-motion, .box-løb {
    background-color: #2b4257;
    padding: 10px;
    color: #fff;
    width: 350px;
    height: 477px;
    margin-block: 20px;
}
.box-fodbold {
        background-color: #2b4257;
        padding: 10px;
        color: #fff;
        width: 350px;
        height: 477px;
        margin-block: 20px;
        margin-right: 30px;    
}

/* Row indsættes for at få boxene til at tilpasse sig skærmstørrelserne.
 og boxene ligger sig under hinanden ved mobil størrelsen*/
 .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 20px;
  }
  
  /* skaber ens columns ( her navngivet box- fodb.... osv for hvert element)
  der er ingen padding fordi det gav rod i tekst og billeder i boxene.*/
  .box.fodbold,.box-badminton,.box-volleyball,.box-motion,.box-løb {
    margin-right: 30px;
  }
  
  /* på skærme der er 992px brede eller mindre, går fra 3 kolonnerne til én kolonne */
  @media screen and (max-width: 992px) {
   .box-fodbold, .box-badminton, .box-volleyball, .box-motion, .box-løb {
    width: 100%;
    margin: 6px 0;
    }
  }
  
  /* på skærme der er 600px brede eller mindre, bliver kolonner sat "ovenpå" hinanden, så brugeren skal scrolle for at se alle fem kolonner */
  @media screen and (max-width: 600px) {
    .row {
      flex-direction: column;
      padding:20px;
      margin-right: 20px;
    }
}
@media screen and (min-width: 780px) {
    .row {
      margin-left: 30px;
      margin-top: 3%;
    }
}

/*Dette er footeren, som har samme baggrundsfarve, som navbaren. Color til at angive skriftfarven.
Text-align er blevet brugt, således at indholdet er blevet placeret fra venstre side.*/
footer {
    background-color: #2b4257;
    color: #ffffff;
    padding: 10px;
    display: block;
    margin-top: 10%;
    padding: 1px;
    justify-content: space-between;
    text-align: left;

}

/*Der er også blevet lavet en footer ul, således der ikke fremvises nogle elementer i punktformer, da indholdet er blevet opsat i en liststyle*/
footer ul {
    list-style-type: none;
}

/*Vi havde problemer med at vores footer og pop-up tilmeldningsknap gav et "hul" i vores footer, 
når skærmsstørrelsen var mindre end 700px. Vi fik hjælp af ChatGPT til at finde problemet: https://chat.openai.com/share/5287e549-4caa-4901-ab90-858af1efbe7f
ChatGPT fortalte os bl.a. at vi havde skrevet vores tag forkert og vi havde nogle andre formateringsproblemer med hvordan vi havde formuleret vores kode.*/
@media screen and (max-width: 700px) {
    footer {
        margin-top: 20%;
    }
}

/* Når skærmstørrelsen er mindre end 700 pixels bred, skal alle links gemmes i navbaren (fællesskab, sport og kontakt) 
I stedet skal ikonet fremvises, således der fremstår en hamburger menu. https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
@media screen and (max-width: 700px) {
    .navigation a:not(:first-child) {
        display: none;
    }
/*Ikonet og fa.fa-bars er hamburger menuen*/
    .navigation a.icon,
    .fa.fa-bars {
        float: right;
        display: block;
        font-size: 30px;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
    .navigation.responsive {
        position: relative;
    }

    .navigation.responsive a.icon,
    .fa.fa-bars {
        position: absolute;
        right: 0;
        top: 2.5%;
        left: 93%;

    }

    .navigation.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}
.info {
    padding-left: 40px;
    color: white;
}