body,
html {
font-family: "Poppins", sans-serif;
margin: 0 0;
width: 100vw;
height: 100vh;
text-align: center;
}
* {
margin: 0;
padding: 0;
}
h1 {
color: #eb839b;
font-family: "Gochi Hand", cursive;
font-size: 937.5%;
margin-top: 0x;
margin-bottom: 0.1px;
}
h2 {
color: #eb839b;
font-size: 250%;
margin: 1% 0;
}
h3 {
color: #e76583;
font-size: 160%;
}
p {
color: rgb(58, 57, 57);
font-size: 125%;
margin-bottom: 50px;
}
hr {
border: dotted #f1dde2 6px;
border-bottom: none;
margin: 0 35%;
}
span {
color: rgb(58, 57, 57);
}
nav {
display: inline-block;
justify-content: center;
}
.info-table {
text-align: left;
width: auto;
margin: 2% 25% 0;
}
.info-info {
width: 30%;
}
.cv-table {
text-align: left;
text-indent: 1%;
justify-content: center;
margin: 2% 25%;
}
.w {
width: 150px;
}
.td {
color: #e76583;
font-weight: bold;
}
.td-bg {
background-color: #f7c3cf;
margin-left: 20%;
vertical-align: top;
}
#summary {
width: 50%;
margin: 40px auto 40px auto;
}
.nav-links {
line-height: 0.6;
padding: 28px 0;
background-color: none;
}
.nav-links li {
display: inline-block;
margin: 0 15px;
background-color: none;
}
.nav-links li a {
text-decoration: none;
padding: 5px 0;
position: relative;
background-color: none;
}
.nav-links li a::after {
content: "";
background: #eb839b;
width: 0;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
.nav-links li a:hover::after {
width: 100%;
background-color: none;
}
.top-about {
width: 100vw;
height: 20vw;
background-color: rgb(58, 57, 57);
padding-top: 5%;
}
.top-contact {
width: 100vw;
height: 600px;
background-color: rgb(58, 57, 57);
padding-top: 5rem;
}
.formStyle {
display: inline-block;
width: fit-content;
}
::placeholder {
color: rgb(58, 57, 57);
padding: 3%;
}
.first-section,
.second-section,
.third-section {
display: flex;
gap: 1rem;
}
.fourth-section {
display: flex;
flex-direction: column;
}
input:focus,
input:hover,
select {
outline: none;
border: 2px solid rgb(255, 255, 255);
}
.inputStyleOne {
background-color: #eaa9b8;
width: 100%;
height: 50px;
margin: 5px;
padding: 0 1%;
border-radius: 15px;
border: 2px solid rgb(58, 57, 57);
transition: 0.3s border-color;
}
.inputStyleTwo {
background-color: #e98ea3;
width: 100%;
height: 50px;
margin: 5px;
padding: 0 1%;
border-radius: 15px;
border: 2px solid rgb(58, 57, 57);
}
.inputStyleThree {
background-color: #e77791;
width: 100%;
height: 50px;
margin: 5px;
padding: 0 1%;
border-radius: 15px;
border: 2px solid rgb(58, 57, 57);
}
.inputStyleFour {
background-color: #e77791;
width: 103% !important;
height: 54px;
margin: 5px;
padding: 0 1%;
border-radius: 15px;
border: 2px solid rgb(58, 57, 57);
}
.submitStyle {
background-color: #e95577;
width: 116px;
height: 50px;
margin: 5px;
border-radius: 25px;
border: 2px solid rgb(58, 57, 57);
place-self: center;
}
.submitStyle:hover {
background-color: #c94765;
cursor: pointer;
width: 116px;
height: 50px;
margin: 5px;
border-radius: 25px;
border: 2px solid rgb(58, 57, 57);
}
.messageStyle {
background-color: #eb6786;
width: 500px;
height: 200px;
margin: 5px;
border-radius: 15px;
resize: none;
border: 2px solid rgb(58, 57, 57);
padding: 1rem;
}
.messageStyle::placeholder {
padding: 0;
}
.map {
padding-top: 5rem;
overflow-x: hidden;
}
.workImgLeft {
position: absolute;
left: 20%;
top: 10%;
width: 11%;
}
.workImgRight {
position: absolute;
left: 70%;
top: 45%;
width: 11%;
}
.cv-img {
width: 2%;
}
.websites {
font-size: 100%;
margin-bottom: 1%;
font-weight: bold;
margin-right: 8%;
}
.webclick:hover {
color: white;
}
.top-about h2 {
text-align: center;
margin: 0;
}
.header {
position: fixed;
box-shadow: 0 -6px 10px 5px rgb(58, 57, 57);
width: 100%;
height: 7%;
background-color: #ffffff;
}
.top-site {
/* width: 100vw; */
height: 52.2vw;
background-color: rgb(58, 57, 57);
padding-top: 5%;
}
.top-contact h3 {
margin-left: -350px;
}
.bot-site {
background-color: rgb(58, 57, 57);
padding: 1px 0 1px;
margin-top: 3%;
}
.left-cloud {
position: absolute;
right: 200px;
width: 230px;
height: 230px;
}
.right-cloud {
position: absolute;
left: 200px;
width: 230px;
height: 230px;
}
.tree {
width: 50%;
margin-bottom: 0;
}
.skill-row {
width: 50%;
margin: 40px auto 40px auto;
text-align: left;
}
#one {
color: #eb839b;
font-size: 125%;
line-height: -1;
margin-bottom: 100px;
}
.ps-img {
width: 15%;
float: left;
margin-right: 30px;
}
.java-img {
width: 15%;
float: right;
margin-left: 30px;
}
.javahead {
text-align: right;
}
#javap {
text-align: right;
}
.coding-img {
width: 15%;
float: left;
margin-right: 30px;
}
.noemi-pic {
width: 12%;
margin-bottom: 1%;
}
a {
color: #eb839b;
text-decoration: none;
}
#copyright {
line-height: 0;
color: rgb(255, 255, 255);
}
.footer-links {
margin: 0 10px;
font-size: 120%;
line-height: 6;
}
.external-links:hover {
background-color: #f8e0c4;
}
.footer-links:hover {
background-color: #f8e0c4;
}
.btn {
background: #eb839b;
background-image: -webkit-linear-gradient(top, #eb839b, #e76583);
background-image: -moz-linear-gradient(top, #eb839b, #e76583);
background-image: -ms-linear-gradient(top, #eb839b, #e76583);
background-image: -o-linear-gradient(top, #eb839b, #e76583);
background-image: linear-gradient(to bottom, #eb839b, #e76583);
-webkit-border-radius: 11;
-moz-border-radius: 11;
border-radius: 11px;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #f7c3cf;
background-image: -webkit-linear-gradient(top, #f7c3cf, #e76583);
background-image: -moz-linear-gradient(top, #f7c3cf, #e76583);
background-image: -ms-linear-gradient(top, #f7c3cf, #e76583);
background-image: -o-linear-gradient(top, #f7c3cf, #e76583);
background-image: linear-gradient(to bottom, #f7c3cf, #e76583);
text-decoration: none;
}
#myBtn {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #eb839b; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 50px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
@media (max-width: 1555px) {
.workImgLeft {
transition: 1s;
left: 5%;
}
.workImgRight {
transition: 1s;
left: 84%;
}
}
@media (max-width: 810px) {
.workImgLeft,
.workImgRight {
display: none;
}
}
@media (max-width: 768px) {
.top-contact {
height: 800px;
}
.inputStyleOne,
.inputStyleTwo,
.inputStyleThree,
.inputStyleFour,
.messageStyle {
width: auto !important;
}
.formStyle {
display: flex;
flex-direction: column;
width: 100%;
}
.top-contact h3 {
margin: 0;
padding-left: 10px;
float: left;
}
.first-section,
.second-section,
.third-section,
.fourth-section {
flex-direction: column;
gap: 0;
padding-right: 1rem;
}
.submitStyle,
.submitStyle:hover {
width: 100%;
}
}