html_css

1
@font-face {
2
    font-family: TruenoRoundBd;
3
    src: url("fonts/TruenoRoundBd.otf") format("opentype");
4
}
5
@font-face {
6
    font-family: VarelaRoundRegular;
7
    src: url("fonts/VarelaRound-Regular.otf") format("opentype");
8
}
9

10
.navmenu__main {
11
    display: flex;
12
    gap: 10px;
13
    margin-bottom: 5px;
14

15
}
16

17
.navmenu__flexboxtitle {
18
    font-family: TruenoRoundBd;
19
    font-size: 18px;
20
    text-decoration: none;
21
    color: black;
22
}
23

24
.navmenu__home {
25
    display: flex;
26
    width: 33%;
27
    margin: 0;
28
    padding: 0;
29
    justify-content: center;
30
}
31

32
.navmenu__menu {
33
    display: flex;
34
    text-align: center;
35
    width: 33%;
36
    margin: 0;
37
    padding: 0;
38
    justify-content: space-around;
39
    list-style-type: none;
40
}
41
.navmenu__btn-contact {
42
    display: flex;
43
    width: 33%;
44
    margin: 0;
45
    padding: 0;
46
    justify-content: center;
47
}
48

49
.main__container {
50
    background-color: #f1ddca;
51
    min-height: 96vh;
52
    padding: 0px;
53
    margin: 0px;
54
    display: flex;
55
    justify-content: center;
56
    align-items: center;
57

58
}
59

60
.main__input {
61
    background-color: white;
62
    display: flex;
63
    flex-direction: column;
64
    padding: 20px;
65
    gap: 5px;
66
    min-width: 300px;
67
}
68

69
.main__forminput {
70
    padding: 5px;
71
    min-width: 285px;
72
}
73

74
.refitem {
75
    color: #970000;
76
    text-decoration: none;
77
    font-family: VarelaRoundRegular;
78
    font-weight: lighter;
79
    font-size: 11px;
80
}
81
.refitem:hover {
82
    opacity: .8;
83
}
84

85
.main__menuheader {
86
    display: flex;
87
    font-family: VarelaRoundRegular;
88
    font-weight: lighter;
89
    font-size: 22px;
90
    margin: 0;
91
    justify-content: center;
92
}
93

94
.btn {
95
    display: flex;
96
    color: white;
97
    background: #a14434;
98
    border-style: none;
99
    font-size: 11px;
100
    padding: 5px 20px;
101
    justify-content: center;
102
    align-items: center;
103
    align-self: center;
104
}
105

106
.btn:hover {
107
    opacity: .8;
108

109
}
110

111
@media only screen and (max-width: 430px) {
112
    .navmenu__main {
113
        flex-wrap: wrap;
114
        gap: 0px;
115
    }
116
    .navmenu__menu {
117
        order: 1;
118
        width: 100%;
119
    }
120
    .navmenu__home {
121
        width: 50%;
122
        justify-content: left;
123
    }
124
    .navmenu__btn-contact {
125
        width: 50%;
126
        justify-content: right;
127
    }
128
}