/* Variables */
:root {
  --main-bg: #cccccc;
  --sect-bg: antiquewhite;
  --button: #dd0000; 
  --button-hov: #007700;
  --center-els: 0 auto; 
}
/* Google font */
/* dancing-script-regular - latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dancing-script-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Dancing Script Regular'), local('DancingScript-Regular'),
       url('../fonts/dancing-script-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dancing-script-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dancing-script-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dancing-script-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dancing-script-v9-latin-regular.svg#DancingScript') format('svg'); /* Legacy iOS */
}
/* comfortaa-regular - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'),
       url('../fonts/comfortaa-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v12-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* Remove browser settings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* General styling */
body {
  background-color: var(--main-bg);
  font-family: sans-serif;
}
/* Navigation */
.mainnav > ul > li {
  display: inline-block;
}
nav label {
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  cursor: pointer;
}
nav input[type="checkbox"] {
  display: none;
}
[class^="dropmenu-"] {
  display: none;
  background: white;
  position: absolute;
  top: 20px;
}
[class^="dropmenu-"] li {
  list-style-type: none;
}
[class^="dropmenu-"] a {
  color: black;
  text-decoration: none;
}
.dropmenu-c {
  right: 30px;
}
.dropmenu-b {
  right: 70px;
}
.dropmenu-a {
  right: 160px;
}
/* Header */
header {
  width: 100vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  background-image: url(../images/sergei-akulich-457851-unsplash.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
h1 {
  font-family: 'Dancing Script';
  font-size: 3rem;
  flex: 0 1 3.2rem;
  margin-top: 0;
  margin-bottom: 0;
}
.subtitle {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: var(--sect-bg);
}
.fbw12 {
  color: var(--sect-bg);
  text-decoration: underline dotted;
}
/* Main part */
section, article {
  background-color: var(--sect-bg);
  margin-bottom: 20px;
}
.jumbotron, .main-content, .last, .further-articles {
  margin: 0 auto 20px auto;
  border-radius: 20px;
}
.jumbotron-head, .main-head, .last-head {
  margin: 20px auto;
  padding: 20px;
  text-align: center;
}
.jumbotron-text, .main-text, .last-text {
  margin: 0 15px 30px 15px;
  text-align: justify;
}
.main-text {
  padding-bottom: 20px;
}
.button-container {
  text-align: center;
}
.jumbotron-button, .article-button, .last-button {
  margin-bottom: 15px;
  background-color: var(--button);
  font-size: 1.5rem;
  padding: 10px;
  color: var(--sect-bg);
}
/* Articles and images */
.further {
  flex: 0 0 45%;
  border: 2px solid var(--button);
  border-radius: 10px;
  margin: 2.5%;
  position: relative;
  overflow: hidden;
}
.further section {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.further section a {
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
.further section img {
  width: 100%;
}
.further h2 {
  text-align: center;
  font-family: 'Comfortaa';
  color: white;
  position: absolute;
  top: 80px;
}
.further p {
  width: 90%;
  text-align: justify;
  margin: 0 auto 30px auto;
}
/* Footer */
fieldset {
  margin: 0 auto 20px auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
fieldset input, fieldset button {
  margin: var(--center-els);
}
.icons, .copyright {
  text-align: center;
}
a.social {
  text-decoration: underline dotted;
  color: black;
}
span.fab, span.fas {
  font-size: 2em;
}
/* Media queries */
/* Large screens */
@media screen and (min-width: 769px) {
  /* Navigation */
  .mainnav {
    background-color: black;
    text-align: right;
    padding-right: 10px;
  }
  .dropdown-a:hover nav, .dropdown-b:hover nav, .dropdown-c:hover nav {
    display: block;
  }
  .jumbotron, .main-content, .last, .further-articles, fieldset {
    width: 720px;
  }
  /* Article section */
  .further-articles {
    display: flex;
    flex-wrap: wrap;
  }
  .further section {
    height: 190px;
  }
  .further section:hover a {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  /* Buttons */
  .jumbotron-button:hover, .article-button:hover, .last-button:hover {
    background-color: var(--sect-bg);
    color: var(--button-hov);
    border: 2px solid var(--button-hov);
  }
  /* Hover effects on social network logos */
  [class*="facebook"]:hover, [class*="twitter"]:hover, [class*="linkedin"]:hover {
    color: blue;
  }
  [class*="google"]:hover {
    color: red;
  }
  [class*="envelope"]:hover {
    color: orange;
  }
  [class*="instagram"]:hover {
    color: green;
  }
}
/* Tablet */
@media screen and (min-width: 568px) and (max-width: 768px){
  /* Navigation */
  .mainnav {
    background-color: black;
    text-align: right;
  }
  #t-info:checked ~ .dropmenu-a, #t-links:checked ~ .dropmenu-b, #t-extra:checked ~ .dropmenu-c {
    display: block;
  }
  /* Contents in the main section */
  .jumbotron, .main-content, .last, .further-articles, fieldset {
    width: 500px;
  }
  /* Article section */
  .further-articles {
    display: flex;
    flex-wrap: wrap;
  }
  .further section {
    height: 130px;
  }
}
/* Phones */
@media screen and (max-width: 567px) {
  /* Navigation */
  .mainnav {
    background-color: black;
    text-align: right;
  }
  .mainnav > ul > li:last-child a {
    padding-right: 0;
  }
  #t-info:checked ~ .dropmenu-a, #t-links:checked ~ .dropmenu-b, #t-extra:checked ~ .dropmenu-c {
    display: block;
  }
  /* Contents in the main section */
  .jumbotron, .main-content, .last, .further-articles, fieldset {
    width: 320px;
  }
  /* Article section */
  .further {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .further section {
    height: 180px;
  }
}