@font-face {
    font-family: "Liberation Serif";
    src: url("../fonts/LiberationSerif-Regular.ttf");
}

html {
	background: url("wp.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: bottom;
}

body {
    color: white;
    font-family: "Liberation Serif";
    /*text-align: center;*/
}

.floating {
    overflow-wrap: anywhere;
    border-radius: 25px;
    width: clamp(400px, 85vw, 1200px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(53, 94, 131, 0.9);
    box-shadow: 2px 2px 5px rgba(53, 94, 131, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;
    /*text-align:center;*/
    backdrop-filter: blur(3px);
}

.floating_2 {
    overflow-wrap: anywhere;
    font-size: 25px;
    border-radius: 25px;
    width: clamp(300px, 85vw, 1000px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(53, 94, 131, 0.9);
    box-shadow: 2px 2px 5px rgba(53, 94, 131, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;
}

.floating_3 {
    overflow-wrap: anywhere;
    font-size: 32px;
    border-radius: 25px;
    width: clamp(300px, 85vw, 1000px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(28, 54, 133, 0.9);
    box-shadow: 2px 2px 5px rgba(28, 54, 133, 0.8);
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;
}

.floating_4 {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(150px, 85vw, 500px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(28, 54, 133, 0.9);
    box-shadow: 2px 2px 5px rgba(28, 54, 133, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;  
}

.floating_5 {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(50px, 50vw, 250px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;  
}

.floating_6 {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(100px, 100vw, 500px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(173, 216, 230, 0.95);
    box-shadow: 2px 2px 5px rgba(173, 216, 230, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;  
    font-family: "Liberation Serif";
    color: rgba(53, 94, 131);
}

.floating_7 {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(100px, 100vw, 1100px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(173, 216, 230, 0.95);
    box-shadow: 2px 2px 5px rgba(173, 216, 230, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;  
    font-family: "Liberation Serif";
    color: rgba(53, 94, 131);
}

h1 { 
    font-size: 55px;
    text-align:center;
}
h2 { 
    font-size: 25px;
    letter-spacing: 10px; 
    padding-left: 22px;
    text-align:center;
}

.highlight {
    color: rgb(212, 161, 9);
}

.highlight_number {
    color: rgb(212, 161, 9);
    font-family: "JMH Psychedelic";
    font-size: 34px;
}

.a_highlight {
    color: rgb(212, 161, 9);
}

.a_highlight:hover {
    color: rgb(212, 161, 9);
    text-shadow: 1px 1px 5px;
}

.icons {
    display: flex;
    justify-content: space-evenly;
}

.font {
    color: white;
    font-family: "Psychedelic";
}

a {
    color: #f3f3f3;
    text-decoration: none;
    cursor: pointer;
}
a:hover {
    color: #ffffff;
    text-shadow: 1px 1px 5px;
}

.floating_3_a {
    overflow-wrap: anywhere;
    font-size: 24px;
    border-radius: 25px;
    width: clamp(300px, 85vw, 1000px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(28, 54, 133, 0.9);
    box-shadow: 2px 2px 5px rgba(28, 54, 133, 0.8);
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;
    color: #f3f3f3;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-family: "Liberation Serif";
}

.floating_3_a:hover {
    color: #ffffff;
    text-shadow: 1px 1px 5px;
}

.floating_4_a {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(150px, 85vw, 500px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(28, 54, 133, 0.9);
    box-shadow: 2px 2px 5px rgba(28, 54, 133, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center; 
    color: #f3f3f3;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-family: "Liberation Serif";
}

.floating_4_a:hover {
    color: #ffffff;
    text-shadow: 1px 1px 5px;
}

.floating_5_a {
    overflow-wrap: anywhere;
    font-size: 20px;
    border-radius: 25px;
    width: clamp(100px, 100vw, 200px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(173, 216, 230, 0.95);
    box-shadow: 2px 2px 5px rgba(173, 216, 230, 0.8);
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 25px;    
    backdrop-filter: blur(3px);
    text-align:center;  
    color: #f3f3f3;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-family: "Liberation Serif";
    color: rgba(53, 94, 131);
}

.floating_5_a:hover {
    color: rgba(53, 94, 131);
    text-shadow: 1px 1px 5px;
}

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

.flex-wrap {
 flex-wrap:wrap
}

.place-content-center {
 place-content:center
}

.right {
  float: right
}

.bold {
  font-weight: 1000
}

.bolder {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}

.underline {
  text-decoration: underline
}