/*** OVERALL RULES ***/

@font-face {
    font-family: "Akidenz";
    src: url("./data/Akzidenz-grotesk-roman.ttf");
}

* {
    box-sizing: border-box;
}

body {
    padding: 1.5%;
    font-family: "Akidenz";
}

/* Center website */
.main {
    max-width: 100%;
    margin: auto;
}


h1 {
    text-transform: lowercase;
    font-size: 2.5vw;
    word-break: break-all;
}

p {
    margin-left: 50%;
    margin-top: -7.5%;
    font-size: 1.25vw;
    line-height: .1vh;
}

.intro__text {
    flex-direction: column;
    font-size: 2.5vw;
    margin-left: 15%;
    max-width: 50%;
    margin-top: 20%;
    line-height: 5vh;

}

.subtitle {
    margin-top: 0%;
    text-transform: uppercase;
    font-size: 1vw;
    color: #666;
}

/* Content */
.content {
    background-color: white;
    padding: 5%;
}


/*** LAYOUT GRID ***/

.row {
    margin: 2% -4%;
    margin-top: -10%;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
    padding: 2%;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    display: none; /* Hide columns by default */
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}


/*** HEADER ***/

header {
    width: 100%;
    position: fixed;
    background: white;
    padding: 1.5% 0;
    font-weight: bolder;
    top: 0;
}

a {
    margin-left: 92%;
    text-decoration: none;
    color: #333;
  }
  
a:visited {
    text-decoration: none;
    color: #333;
  }
  


/*** BUTTONS ***/
.btn {
    text-transform: uppercase;
    outline: none;
    padding: 1.5% 2%;
    background-color: white;
    cursor: pointer;
    border: .05rem dashed;
}

/* Add a grey background color on mouse-over */
.btn:hover {
    background-color: grey;
    color: grey;
    transition-duration: .25s;
}

#myBtnContainer {
    margin-left: 40%;
    margin-top: -4.5%;
}

/* BUTTON Colors*/

#btn__blue:hover {
    background-color: #0e3aff;
    color:  #0e3aff;
}

#btn__pink:hover {
    background-color: #e20985;
    color: #e20985;
}

#btn__black:hover {
    background-color: #000;
    color: #000;
}

#btn__brown:hover {
    background-color: #5f1f00;
    color: #5f1f00;
}

#btn__purple:hover {
    background-color: #840188;
    color: #840188;
}

#btn__green:hover {
    background-color: #009000;
    color: #009000;
}

#btn__yellow:hover {
    background-color: #ffff12;
    color: #ffff12;
}

#btn__red:hover {
    background-color: #c00;
    color: #c00;
}





/*
    COLORS
    Blue: 0e3aff
    Pink: e20985
    Black: 000
    Brown: 5f1f00
    Purple: 840188
    Green: 009000
    Yellow: ffff12
    Red: c00
*/